<template>
    <div class="test">
        <div v-for="(item, i) in arr" :key="i">
            <div class="title">a{{i}}</div>
            <i-form  v-model="arr[i]" :ref="`form${i}`">
                <Form-item  v-for="(items, ii) in item.arr" :key="ii"   :prop="`arr.${ii}.value`" :rules="ruleObj[items.type]">
                    <i-input :value.sync="items.value" v-show="items.type == 'a'" ></i-input>
                    <i-select v-model="items.value" v-show="items.type == 'b'">
                        <i-option value="1">1231</i-option>
                    </i-select>
                    <Date-picker v-show="items.type == 'c'" type="date" placeholder="选择日期" :value.sync="items.value"></Date-picker>
                </Form-item>
            </i-form>
        </div>
        <i-button type="primary" @click="submit">提交</i-button>
        <i-form v-model="asd" ref="asd" >
            <Form-item prop="a"  :rules="{required: true, message: '请输入1', trigger: 'blur'}">
                <i-input v-model="asd.a" placeholder="请输入胜多负少的"></i-input>
            </Form-item>
        </i-form>
    </div>
</template> 
<script>
export default {
    name: 'test',
    data() {
        return {
            asd: {
                a: ''
            },
            arr: [
                {
                    arr: [
                        {
                            type: 'a',
                            value: ''
                        },
                        {
                            type: 'b',
                            value: ''
                        },
                        {
                            type: 'c',
                            value: ''
                        }
                    ]
                },
                {
                    arr:[
                        {
                            type: 'a',
                            value: ''
                        },
                        {
                            type: 'b',
                            value: ''
                        },
                        {
                            type: 'c',
                            value: ''
                        },
                        {
                            type: 'a',
                            value: ''
                        }
                    ]
                }
            ],
            
        }
    },
    computed: {
        ruleObj () {
            return {
                'a': {required: true, min: 3, message: '最小3最大6', trigger: 'blur'},
                'b': {required: true, message: '请选择b', trigger: 'change'},
                'c': {required: true,  message: '请选择时间', trigger: 'change'}
                }
            }
    },
    methods: {
        submit () {
            const {arr} = this
            let status = true
            for (let k=0; k < arr.length; k++) {
                if (!this.doRule(k)) {
                    status =  false
                }
            }
        },
        doRule (i) {
             this.$refs[`form${i}`][0].validate((valid) => {
                  if (valid) {
                      console.log(111)
                      return true
                  } else {
                      console.log(333)
                      return false
                  }
             })
        }
    }
}
</script>